<template>
  <div class="discount">
    <van-tabs type="card" class="tabs">
        <!-- //自定义插槽，修改标签的 title -->

        <van-tab title="20:00" class="title1">
        <van-card
            v-for="item in products"
            :key="item.id"
            :price="item.price | money"
            :origin-price="item.originPrice | money"
            :title="item.title"
            :thumb="item.image"
            @click="jumpToDetail(item.id)"
        />
        <!-- <template #title>
            <p class="p1">4月1日</p>
            <p class="p2">20:00</p>
            <p class="p3">进行中</p>
        </template>内容1 -->
        </van-tab>
        <van-tab title="21:00" class="title2">
            <van-card
                v-for="item in hot"
                :key="item.id"
                :price="item.price | money"
                :origin-price="item.originPrice | money"
                :title="item.title"
                :thumb="item.image"
                @click="jumpToDetail(item.id)"
            />
        </van-tab>
        <van-tab title="22:00" class="title3">
            <van-card
                v-for="item in products"
                :key="item.id"
                :price="item.price | money"
                :origin-price="item.originPrice | money"
                :title="item.title"
                :thumb="item.image"
                @click="jumpToDetail(item.id)"
            />
        </van-tab>
        <van-tab title="23:00" class="title4">
            <van-card
                v-for="item in hot"
                :key="item.id"
                :price="item.price | money"
                :origin-price="item.originPrice | money"
                :title="item.title"
                :thumb="item.image"
                @click="jumpToDetail(item.id)"
            />
        </van-tab>
    </van-tabs>

  </div>
</template>

<script>
import { getHots } from '@/api/discount'
export default {
  name: 'Discount',
  data() {
    return {
      hot: [],
      isEnd: false,
      nextIndex: 0,
      products: [],
    }
  },
  async created() {
    try {
      const [
        { list: products, isEnd, nextIndex },
      ] = await Promise.all([
        getHots(),
      ])
      this.products = products
      this.hot = products.splice(6, 10)
      this.isEnd = isEnd
      this.nextIndex = nextIndex
    } catch (error) {
      console.error('有错误：', error)
    }
  },
  // 跳转到详情页面
  jumpToDetail(id) {
    this.$router.push('/detail/' + id)
  },
}
</script>

<style lang="less" scoped>
// .discount[data-v-5aba3dc4]{
//     min-height: 80px;
//     .discount .van-tabs--card[data-v-5aba3dc4]{
//         min-height: 80px;
//         .van-tabs--card>.van-tabs__wrap{
//             min-height: 80px;
//             .van-tabs__nav--card{
//                 min-height: 80px;
//             }
//         }
//     }
// }
.tabs{
    margin: 50px 5px;
}
</style>
